Ext.define("Triends.Model.Message",{
	extend: "Ext.data.Model",
	config: {
		fields: [
			"Number", "Sender", "SenderID", "Getter", "GetterID","Message", "Confirm", "Date", "Time"
		]
	}
});

var MessageStore = Ext.create("Ext.data.Store",{
	model: "Triends.Model.Message",
	id: 'msgstore',
	listeners: {
		load: function() {
			var newmsg = 0;
        	MessageStore.each( function(model) {
    	    	if (model.data.Confirm == 0) {
	    	    	newmsg++;
            	}
           	});
           	if (newmsg != 0) {
           		var msgboxbtn = Ext.getCmp('msgboxbtn');
           		msgboxbtn.setBadgeText(newmsg);
	        }
		}
	},
	proxy: {
		type: "jsonp",
		callbackKey: 'callback',
		url: "http://itscreater.cafe24.com/Triends/Mymessage.jsp"
	},
	sorters: [
		{
			property: 'Date',
			direction: 'DESC'
		},
		{
			property: 'Time',
			direction: 'DESC'
		}
	]
	
});


Ext.define('Triends.view.Mymessage', {
	extend: 'Ext.dataview.DataView',
	xtype: 'mymsg',
	id: 'mymsg',
	config: {
		fullscreen: true,
    	store: MessageStore,
    	useComponents: true,
    	style: 'background: white',
		defaultType: 'MessageItem',
		loadingText: false,
		items:[{
			xtype: 'toolbar',
			docked: 'top',
			title: 'Message Box'
		}],
    	listeners: {
    		initialize: function() {
    			var wrapper = this.getScrollable().getElement();
   				
   				var unloader = new Unloader(wrapper, '.x-container x-data-item');

				var masterScroll = new iScroll(wrapper.getId(), {
    				onRefresh: function() {
        				unloader.setup(this.x, this.y);
    				},
    				onPositionChange: function(x, y) {
        				unloader.onmove(x, y); 
    				}
				});
				this.getScrollable().setScroller(masterScroll);
			},
    		itemtap: function(list, index, target, model, e, eOpts) {
				Ext.Viewport.setMasked({
					xtype: 'loadmask',
    				indicator: true
				});
    			
        		var msgsenderpanel = Ext.getCmp('msgsenderpanel');
        		var msgtimepanel = Ext.getCmp('msgtimepanel');
        		var msgpanel = Ext.getCmp('msgpanel');
        			msgsenderpanel.setData(model.data);
        			msgtimepanel.setData(model.data);
        			msgpanel.setData(model.data);
        		var msgnum = model.data.Number;
				
        		Ext.data.JsonP.request({
 					url: 'http://itscreater.cafe24.com/Triends/MessageConfirm.jsp',
 					params: {num: msgnum},
 					callbackkey: 'callback',
 					success: function() {
 						var userid = Ext.getStore('UserStore').getAt(0).data.ID;
   			   			
   			   			
   			   	var confirm = model.data.Confirm;
				var sender = model.data.Sender;
				var senderid = model.data.SenderID;
				var msg = model.data.Message;
				msg.replace(/<br>/gi, " ");
				var panel = target.getItems().items[0];
				
				if (confirm == 0) {
				var msgboxbtn = Ext.getCmp('msgboxbtn');
           		var oldValue = msgboxbtn.getBadgeText();
           		msgboxbtn.setBadgeText(oldValue-1);
					
					
				panel.setHtml(
					"<table style='table-layout:fixed;'>"+
						"<tr>" +
							"<td rowspan='2' align='center' valign='center' width=50 height=50 style='word-break:break-all'><img src='https://graph.facebook.com/"+senderid+"/picture?width=48&height=48'></td>" +
							"<td valign='center'><p style='margin-left:20px'><font size='2'>"+sender+"</font></p></td>" +
						 "</tr>" +
						"<tr>" +
							"<td valign='center'><div class='ellipsis' style='margin-left:20px'><nobr><font size='2'>"+msg+"</font></nobr></div></td>" +
						"</tr>"+
					"</table>")
					}
//   			   			var msgStore = Ext.getStore('msgstore');
//            				msgStore.getProxy().setExtraParams({id: userid});
//            				msgStore.load({
//								callback: function() {  
									Triends.app.getHistory().add(Ext.create('Ext.app.Action', {
            							url: 'mainpage/account/msginfo'
        							}));
        							Ext.Viewport.setMasked(false);
//								}
//            				});
 					}
 				});
        		
        	}
        }
	}
});

Ext.define('MessageItem', {
	extend: 'Ext.dataview.component.DataItem',
    xtype: 'MessageItem',
    config: {
    	width: '100%',
		listeners: {
			updatedata: function(dataitem, newData, eOpts) {
				var confirm = this.getRecord().get('Confirm');
				var sender = this.getRecord().get('Sender');
				var senderid = this.getRecord().get('SenderID');
				var msg = this.getRecord().get('Message');
				var panel = this.getItems().items[0];
				
				if (confirm == 0) {
					if(msg.match("<br>") != null)
					{
						msg = msg.replace(/<br>/gi, " ");
					}
				panel.setHtml(
					"<table style='table-layout:fixed;'>"+
						"<tr>" +
							"<td rowspan='2' align='center' valign='center' width=50 height=50 style='word-break:break-all'><img src='https://graph.facebook.com/"+senderid+"/picture?width=48&height=48'></td>" +
							"<td valign='center'><p style='margin-left:20px'><font size='2'><b>"+sender+"</b></font></p></td>" +
						 "</tr>" +
						"<tr>" +
							"<td valign='center'><div class='ellipsis' style='margin-left:20px'><nobr><font size='2'><b>"+msg+"</b></font></nobr></div></td>" +
						"</tr>"+
					"</table>")
//					panel.setHtml(
//						"<table style='table-layout:fixed;'>"+
//							"<tr>"+
//								"<td valign='center' align='center' width=120><font size='2'><b>"+sender+"</b></font></td>"+
//								"<td valign='center'>" +
//									'<div class="ellipsis"><nobr><font size="2"><b>'+msg+'</b></font></nobr></div>' +
//								"</td>"+
//							"</tr>"+
//						"</table>"
//					);
				} else if (confirm == 1) {
					if(msg.match("<br>") != null)
					{
						msg = msg.replace(/<br>/gi, " ");
					}
					panel.setHtml(
					"<table>"+
						"<tr>" +
							"<td rowspan='2' align='center' valign='center' width=50 style='word-break:break-all'><img src='https://graph.facebook.com/"+senderid+"/picture?width=48&height=48'></td>" +
							"<td valign='center'><p style='margin-left:20px'><font size='2'>"+sender+"</font></p></td>" +
						 "</tr>" +
						"<tr>" +
							"<td valign='center'><div class='ellipsis' style='margin-left:20px'><nobr><font size='2'>"+msg+"</font></nobr></div></td>" +
						"</tr>"+
					"</table>")
//					panel.setHtml(
//						"<table style='table-layout:fixed;'>"+
//							"<tr>"+
//								"<td valign='center' align='center' width=120><font size='2'>"+sender+"</font></td>"+
//								"<td valign='center'>" +
//									"<div class='ellipsis'><nobr><font size='2'>"+msg+"</font><nobr></div></td>"+
//							"</tr>"+
//						"</table>"
//					);
				}
			}
		},
		items: [{
			xtype: 'panel',
			height: 60,
			style: 'border-bottom:1px silver solid; background:white; padding:5px'
		}]
    }
});